<template>
  <div>
    <div class="" search_box>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content ep-bg-purple" />
          <el-input v-model="queryInfo.goods_name" placeholder="搜索产品名称2" :prefix-icon="Search" size="large" />
        </el-col>

        <el-col :span="6">
          <Select mode="api" labelKey="title" valueKey="id" apiUrl="api/admin/shopLabelAddAndEdit" />
        </el-col>

        <el-col :span="6">
          <div class="grid-content ep-bg-purple" />
        </el-col>
      </el-row>
    </div>

    <el-table ref="multipleTableRef" :data="listData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />

      <el-table-column property="产品图片" label="产品图片" width="120">
        <template #default="scope">
          <div class="box">
            <el-image :src="scope.row.head_img[0]" />
          </div>
        </template>
      </el-table-column>

      <el-table-column property="goods_name" label="产品名称" width="120" />

      <el-table-column property="goods_money" label="原价">
        <template #default="scope">
          <div v-for="item in scope.row.prices" :key="item.id">
            <div class="flex align-center">
              <div>{{ item.money_name }}</div>

              <div class="margin-left-xs">¥{{ item.money }}</div>
            </div>
          </div>
        </template>
      </el-table-column>

      <!-- <el-table-column property="address" label="折扣价" show-overflow-tooltip /> -->

      <el-table-column property="address" label="分类">
        <template #default="scope">
          <el-tag class="ml-2" type="success">{{ scope.row.goods_type.type_name }}</el-tag>
        </template>
      </el-table-column>

      <!-- <el-table-column property="address" label="库存" /> -->

      <el-table-column property="buy_num" label="销量" />

      <el-table-column property="address" label="状态">
        <template #default="scope">
          <el-tag class="ml-2" type="success" v-if="scope.row.status == 1">上架</el-tag>
          <el-tag class="ml-2" type="info" v-else>下架</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="300">
        <template #default="scope">
          <div class="flex align-center">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

            <span class="flex margin-left-xs">
              <el-button size="small" type="success" @click="handleEdit(scope.$index, scope.row)"
                v-if="scope.status">上架</el-button>

              <el-button size="small" type="info" @click="handleEdit(scope.$index, scope.row)" v-else>下架</el-button>
            </span>

            <el-button class="margin-left-xs" size="small" type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import Select from '@/components/admin/Select.vue'
import useTableHook from '@/hooks/useTableHook'
import { GoodsList } from '@/api/index'


const queryInfo = ref({
  page: 1,
  limit: 10,
})

onMounted(() => {
  initTable()
})

const { total, changePage, searchTable, listData, initTable } = useTableHook(queryInfo.value, GoodsList)
</script>

<style lang="scss" scoped></style>
